<template>
	<view>
		<cu-custom v-if="customShow" bgColor="bg-ededed" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">添加朋友</block>
		</cu-custom>
		<scroll-view class="scrollPage" scroll-y="true" :style="'height:'+(winHeight-barHeight)+'px'">
			<common-view :needLogin="hasLogin?'n':'y'" :zindex="997" :animationClass="animation" @closeAnimation="closeAnimation" :indicator="indicator"></common-view>
			<view class="cu-bar search bg-ededed" style="padding:10upx 20upx;position:sticky;top:0;z-index:1;">
				<view class="search-form radius" style="margin: 0;background-color:#fff;">
					<text style="width:30upx;" class="icon-search"></text>
					<input @confirm="doSearch" @input="inputEvent" v-model="keyword" :adjust-position="false" type="text" placeholder="账号/手机号"
					 confirm-type="search" :focus="true"></input>
					 <text class="icon-roundclosefill" v-if="keyword" style="font-size:38upx;" @click="clearKeyword"></text>
				</view>
			</view>
			<view v-if="pageData">
				<view>
					<view style="height:1upx;"></view>
					<view class="cu-list menu menu-avatar">
						<view  @click="$util.toPage" :data-url="'../../pages1/contacts/profile?uid='+pageData.user_id" class="cu-item arrow" style="padding-left:24upx;height:104upx;">
							<view class="cu-avatar radius lg" style="height:70upx;width:70upx;left:24upx;border-radius:6upx;" :style="[{backgroundImage:'url('+pageData.avatar+'_200'+')'}]">
								<!-- <view class="cu-tag badge" style="left:auto;top:-2upx;right:-2upx;" :style="'background-color:'+(pageData.online_status=='online'?'#39b54a':'#aaaaaa')+';'"></view> -->
							</view>
							<view class="content align-center justify-center" style="line-height:1.3em;">
								<view class="flex flex-direction" style="align-items:start;">
									<view class="text-cut" style="font-size:26upx;">
									{{pageData.username}}
									
									</view>
									<block v-if="pageData.is_friend">
										<text class="bg-blue text-xs" style="padding:0 5upx;border-radius:6upx;line-height:28upx;width:44upx;text-align:center;">好友</text>
									</block>
									<block v-else>
										<view v-if="pageData.keyword==pageData.usercode" class="text-sm text-gray"><text style="font-size:22upx;">账号</text>:{{pageData.usercode}}</view>
										<view v-if="pageData.keyword==pageData.mobile" class="text-sm text-gray"><text style="font-size:22upx;">手机</text>:{{pageData.mobile}}</view>
									</block>
								</view>
							</view>
							
						</view>
					</view>
				</view>
				<view class="cu-tabbar-height"></view>
			</view>
			<block v-else>
				<view v-if="indicator==0 && pageData==null && keyword!='' && searched==1" style="height:100upx;" class="flex flex-direction justify-center align-center">
					<view class="text-center text-grey text-sm">该用户不存在</view>
				</view>
			</block>
			
		</scroll-view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import contactsObj from 'model/contactsModel.js';
	let disp = require("common/broadcast");
	let me = null;
	export default {
		data() {
			return {
				indicator: 0,
				animation:'',
				customShow:0,
				barHeight:0,
				keyword:'',
				pageData:null,
				searched:0
			};
		},
		onLoad() {
			me = this;
			this.barHeight = this.NativeBar;
			//#ifdef H5 || MP-BAIDU || MP-TOUTIAO || MP-WEIXIN
			this.customShow = 1;
			this.barHeight = this.CustomBar;
			//#endif
		},
		onReady() {
			
		},
		computed: {
			...mapState({
				winHeight: ({
					baseModule
				}) => baseModule.winHeight,
				hasLogin: ({
					userModule
				}) => userModule.hasLogin,
				userInfo: ({
					userModule
				}) => userModule.userInfo,
			})
		},
		methods:{
			...mapMutations(['chatModule/setChatTo']),
			closeAnimation() {
				this.animation = "";
				this.indicator = 0;
			},
			getData(){
				contactsObj.search(me,{
					keyword:me.keyword
				}).then(res => {
					console.log(res)
					me.searched = 1;
					me.pageData=res.info;
					if(me.pageData){
						uni.navigateTo({
							url:"../../pages1/contacts/profile?uid="+me.pageData.user_id
						});
					}
					me.$util.closeIndicator(me);
				}).catch(err => {
					me.searched = 1;
					console.log(err);
				});
			},
			doSearch(){
				me.getData();
			},
			clearKeyword(){
				me.keyword='';
				me.pageData=null;
			},
			inputEvent(){
				me.searched=0;
			}
		}
	}
</script>

<style>
.cu-list.menu-avatar>.cu-item .content{
	left: 114upx;
	width: calc(100% - 24upx - 70upx - 50upx );
}
</style>

